<template>
  <div class="zs-content-common" id="top">
    <div class="zs-content-top">
      <div class="fl logo"></div>
      <div class="fl lefts-top">黑龙江省青年讲师团管理系统</div>
      <div class="fr zs-login" style="padding-right: 20px">
        <span>欢迎您 {{ userName }} &nbsp;&nbsp;</span>
        <!-- <el-tooltip
          class="item"
          effect="dark"
          content="点击修改密码"
          placement="bottom-end"
        >
          <i class="el-icon-s-tools" @click="repeatFn"></i>
        </el-tooltip> -->
        <el-button size="mini" icon="el-icon-lock" @click="repeatFn">修改密码 </el-button>
        <el-button
          size="mini"
          icon="el-icon-s-tools"
          @click="editUserInfo"
          v-if="userInfo.roleId == 2"
          >完善信息
        </el-button>
        <span
          style="line-height: 60px; cursor: pointer"
          class="btn-layout go-out"
          @click="LogOut"
          >退出</span
        >
      </div>
    </div>
    <tea-edit ref="teaedit" />
    <el-dialog
      :close-on-click-modal="false"
      title="退出登录"
      :visible.sync="dialogVisible"
      width="410px"
      @close="closeDialog"
    >
      <p class="tc-loginOut">确定退出登录吗？</p>
      <div class="tc-big-btn">
        <el-button @click="sureFn">确认</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="修改密码"
      :visible.sync="dialogCode"
      width="410px"
      @close="closeCode"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldWord">
          <el-input
            type="password"
            v-model="ruleForm.oldWord"
            autocomplete="off"
            maxlength="14"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newWord">
          <el-input v-model="ruleForm.newWord" type="password" maxlength="14"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="aginWord">
          <el-input
            type="password"
            v-model="ruleForm.aginWord"
            autocomplete="off"
            maxlength="14"
          ></el-input>
        </el-form-item>
        <div class="submit">
          <el-button class="save" @click="submitForm('ruleForm')" size="small"
            >确认</el-button
          >
          <el-button class="save" size="small" @click="dialogCode = false"
            >取消</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TeaEdit from "../components/teaEdit.vue";
import { getToken, setToken, removeToken } from "@/utils/auth";
export default {
  components: { TeaEdit },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.aginWord == this.ruleForm.newWord) {
          this.$refs.ruleForm.validateField("aginWord");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userInfo: {
        roleId: "",
        teaId: "",
      },
      userName: "",
      //标题
      topTitle: "",
      dialogVisible: false,
      //修改密码弹窗
      dialogCode: false,
      //表单
      ruleForm: {
        oldWord: "",
        newWord: "",
        aginWord: "",
      },
      rules: {
        oldWord: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newWord: [
          {
            required: true,
            message: "请输入6-14位的英文或数字或'-_'的密码",
            trigger: "blur",
          },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        aginWord: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.headInfo();
    this.getUserName();
    this.getUserInfo();
  },
  methods: {
    editUserInfo() {
      this.$refs.teaedit.showDetails(this.userInfo.teaId);
    },
    // 退出登录
    LogOut() {
      let self = this;
      this.dialogVisible = true;
    },

    getUserInfo() {
      let self = this;
      self.$http.get("/teacher/getUserLinkedTeaInfo").then(
        (response) => {
          let res = response.data;
          if (res.code == "200") {
            self.userInfo = res.data;
          } else {
            self.$message.error(res.message);
          }
        },
        (err) => {
          console.log("err");
        }
      );
    },
    getUserName() {
      let self = this;
      self.$http.get("/admin/name").then(
        (response) => {
          let res = response.data;
          if (res.code == "200") {
            self.userName = res.data;
          } else {
            self.$message.error(res.message);
          }
        },
        (err) => {
          console.log("err");
        }
      );
    },
    //点击确认执行退出
    sureFn() {
      //this.$store.dispatch("LogOut")
      let self = this;
      self.$http.get("/logout").then(
        (response) => {
          let res = response.data;
          if (res.code == "200") {
            self.$router.push({
              path: "/login",
            });
            removeToken();
            self.$store.commit("SET_ROLES", "");
          } else {
            self.$message.error(res.message);
          }
        },
        (err) => {
          console.log("err");
        }
      );
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    //修改密码
    repeatFn() {
      this.dialogCode = true;
    },
    //关闭修改弹窗
    closeCode() {
      let self = this;
      this.$nextTick(function () {
        self.$refs.ruleForm.resetFields();
      });
    },
    //保存
    submitForm(ruleForm) {
      let self = this;
      self.$refs[ruleForm].validate((valid) => {
        if (valid) {
          self.$http
            .post("/admin/password/update", {
              newPassword: self.ruleForm.newWord,
              oldPassword: self.ruleForm.oldWord,
            })
            .then((response) => {
              let res = response.data;
              if (res.code == "200") {
                self.$alert("修改成功,点击确定退出登录", "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    self.$router.push({
                      path: "/login",
                    });
                    removeToken();
                    self.$store.commit("SET_ROLES", "");
                  },
                });
              } else {
                self.$message.error(res.message);
              }
            });
        }
      });
    },
    //获取头部信息
    headInfo() {
      // let self = this
      // self.$http.get("/certificate/system/unauthorized/config?keys=project_name").then((response) => {
      //     let res = response.data
      //     if(res.code == '200') {
      //         self.topTitle = res.data.config.project_name[0].keyValue
      //     }else{
      //         self.$message.error(res.message)
      //     }
      // }).catch(err => {
      //     console.log(err)
      // })
    },
  },
};
</script>

<style lang="scss">
#top {
  .zs-content-common {
    width: 100%;
    margin: 0 auto;
  }
  .zs-content-top {
    position: relative;
    z-index: 1;
    height: 60px;
    line-height: 60px;
    color: #fff;
    background: #001529;
  }
  .logo {
    font-size: 22px;
    font-weight: bold;
    padding-left: 24px;
  }
  .icon-mima1 {
    font-size: 21px;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: sub;
  }
  .submit {
    margin: 0px auto;
    width: 145px;
  }
  .el-input {
    width: 85%;
  }
  .btn-layout {
    color: #fff;
  }
  .tc-loginOut {
    text-align: center;
  }
  .tc-big-btn {
    text-align: center;
    margin: 20px auto;
  }
  .zs-content-top {
    .el-button {
      background: #333;
      color: #fff;
    }
  }
  .go-out {
    margin-left: 20px;
  }
}
</style>
